<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">  
            #contain{
                position:relative;
                border: 1px  solid red;
                <!-- background: green; -->
                width:300px ;
                height:600px;
            }
            
                #canvas{
                    background:green;
                    position:absolute;
                    top:100px;
                    left:100px;
                    width:250px;
                    height:250px;
                }
            .controlPoint{
                position:absolute;
                top:20px;

            }
        </style>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Bezier</title>
    </head>
    <body>
        <div id="contain"  ondrop="drag(event)" ondragover="dragover(event)">
            <object id="canvas">
                <svg  xmlns="http://www.w3.org/2000/svg" version="1.1" >
                    <path id="t_line" d="M0 100 L 100 0" style="stroke:purple;"/>
                    <path id="t_path" d="M0 100 Q17 26 100 0" style="stroke:purple;fill:transparent"/>
                    <circle cx="50" cy="50" r="6" style="stroke:black;"/>
                </svg>
            </object>
            <button id="c1" class="controlPoint" draggable="true" ondragstart="dragStart(event)"  >
        </div>
        <script  >
            function dragover(event){
            event.preventDefault();
            }
            function dragStart(event){
            console.log(event.target.id);
                event.dataTransfer.setData("id",event.target.id);
            }
            function drag(event){
                event.preventDefault();
            var id=event.dataTransfer.getData("id");
            var target=document.getElementById(id);
               var svg= document.getElementById("canvas");
            console.log(target+" "+"  "+id+" "+event.type+" |"+target.offsetTop+" |"+svg.offsetTop+svg.offsetWidth);
                target.style.top=event.y+"px";
                target.style.left=event.x+"px";
                
               var t_path= document.getElementById("t_path");
               t_path.setAttribute("d","M0 100 Q"+( event.x-svg.offsetLeft)+" " +( event.y-svg.offsetTop )+" 100 0");
                console.log(event.x+" "+event.y+"\n"+t_path.getAttribute("d")+"\n"+t_path.d);
            }

        </script>
    </body>
</html>
